<template>
	<!-- 个人中心 -->
	<div class="container">
		<!-- 用户欢迎信息 -->
		<div class="welcome" @click="handleClick('tpupdata')">
			<image src="/static/logo.png" alt="Avatar" class="avatar"></image>
			<div class="greeting" v-if="isToken">
				<h2>{{username}}</h2>
				<p>欢迎回来~~~</p>
			</div>
			<div class="login" v-if="isUserInfo">
				<button class="login-button" @tap.stop="getUserProfile" lang="zh_CN"
					bindgetuserinfo="getUserProfile">微信登入</button>
			</div>
		</div>

		<!-- 修改个人资料按钮 -->
		<div class="update" @click="handleClick('tpupdata')">
			<image class="updates" src="/static/table/xg.png"></image>修改个人资料
		</div> <!-- 我的预约 -->
		<div>
			<div class="link" style="font-weight: bold;">
				<image class="alis" src="/static/table/yy.png"></image>我的预约
			</div>
		</div>
		<!-- 预约状态标签页 -->
		<div class="tabs">
			<div class="tab" @click="handleClick('tporder','star')">
				<img class="ali" src="../../../static/wdsy/ksy.png" alt="Tab Icon">
				可使用
			</div>
			<div class="tab" @click="handleClick('tporder','all')">
				<img class="ali" src="../../../static/wdsy/yhx.png" alt="Tab Icon">
				已核销
			</div>
			<div class="tab" @click="handleClick('tporder','gold')">
				<img class="ali" src="../../../static/wdsy/ygq.png" alt="Tab Icon">
				已过期
			</div>
			<div class="tab" @click="handleClick('tporder','silver')">
				<img class="ali" src="../../../static/wdsy/xtqx.png" alt="Tab Icon">
				系统取消
			</div>
			<div class="tab" @click="handleClick('tporder','sort')">
				<img class="ali" src="../../../static/wdsy/qbyy.png" alt="Tab Icon">
				全部预约
			</div>
		</div>

		<!-- 底部导航链接 -->
		<div class="footer-links">
			<div @click="handleClick('wdsc')" class="link">
				<image class="alis" src="/static/table/sc.png"></image>我的收藏
			</div>
			<div @click="handleClick('hist')" class="link">
				<image class="alis" src="/static/table/lssc.png"></image>历史浏览
			</div>
			<div @click="handleClick('xx')" class="link" style="color: #a200f3;">
				<image class="alis" src="/static/table/rk.png"></image>家政员入口<span class="sy"
					style="color: #dfdfdf;">(点击试用)</span>
			</div>
			<div @click="handleClick('xthtgl')" class="link" style="color: red;">
				<image class="alis" src="/static/table/sz.png"></image>系统后台管理<span class="sy"
					style="color: #dfdfdf">(点击试用)</span>
			</div>
			<div @click="handleClick('gywm')" class="link">
				<image class="alis" src="/static/table/gy.png"></image>关于我们
			</div>
			<div @click="handleClick('moreInfo')" style="color: chocolate;" class="link">
				<image class="alis" src="/static/table/lx.png"></image>联系作者了解更多详情
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		gonavigateTo,
		goswitchTab,
		uniLogin
	} from '@/request/wx.js';

	import {
		openid,
		UserById
	} from '@/request/api.js';

	const token = ref(null);
	const username = ref('嘿嘿嘿');
	const isToken = ref(false); //判断是否登录
	const isUserInfo = ref(true);


	onLoad((options) => { // 页面加载时获取用户数据
		// 这里的 options 参数包含了页面加载时传递的参数
		console.log('页面加载时获取用户数据', options);

	});

	// 页面显示时执行的逻辑
	onShow(() => {
		console.log('页面显示时加载');
		getToken();
		console.log(token.value);
		if (!token.value) {
			isUserInfo.value = true;
			isToken.value = false;
		} else {
			getUserById();
			isUserInfo.value = false;
			isToken.value = true;
		}
	});

	const getUserProfile = async () => { //登录
		// console.log("微信登入");
		// uni.setStorageSync('token', 2);
		// const storedToken = uni.getStorageSync('token');
		// console.log(storedToken);
		try {
			const res = await uniLogin();
			const code = res.data.code;
			// console.log(code);
			if (code) {
				// 发送code到后端
				const userInfoRes = await openid({
					code: code
				});
				console.log(userInfoRes); // 应该在这里打印结果
				if (userInfoRes.data.code === 200) {
					uni.setStorageSync('token', userInfoRes.data.data.uid);
					isUserInfo.value = false;
					isToken.value = true;
					getToken();
					getUserById();
				}
			} else {
				console.log("登录失败");
				// 处理登录失败的情况
			}
		} catch (error) {
			// 处理错误情况
			console.log(error);
		}
	};

	const getUserById = async () => { //获取用户信息
		const user = await UserById({
			uid: token.value
		});
		const nickname = user.data.data.nickname;
		// console.log(user);
		if (nickname != null) {
			username.value = nickname
		}
	};

	const getToken = () => { // 获取本地存储的token
		const storedToken = uni.getStorageSync('token');
		token.value = storedToken || '';
	};


	const handleClick = (type, event) => { // 定义点击事件处理函数
		console.log(`按钮:${event}:被点击了：${type}`);
		console.log(":" + token.value + ":");
		switch (type) {
			case 'tporder': //跳转我的预约页面tporder
				if (token.value === '') {
					console.log("未登录");
					break;
				}
				gonavigateTo(`/pages/user/appointment/appointment?event=${event}`);
				break;
			case 'tpupdata': //跳转修改信息页面tpupdata
				if (token.value === '') {
					console.log("未登录");
					break;
				}
				gonavigateTo(`/pages/user/userinfo/userinfo`);
				break;
			case 'wdsc': // 跳转我的收藏wdsc
				if (token.value === '') {
					console.log("未登录");
					break;
				}
				gonavigateTo(`/pages/user/hist/favorites`);
				break;
			case 'hist': // 跳转历史浏览hist
				if (token.value === '') {
					console.log("未登录");
					break;
				}
				gonavigateTo(`/pages/user/hist/hist`);
				break;
			case 'xx': // 跳转家政xx
				gonavigateTo(`/pages/home/index/register`);
				break;
			case 'xthtgl': // 系统后台管理xx
				gonavigateTo(`/pages/admin/login/admin_login`);
				break;
			case 'gywm': // 跳转关于我们gywm
				gonavigateTo(`/pages/user/index/gywm`);
				break;
			case 'moreInfo': // 跳转联系作者了解更多详情moreInfo
				gonavigateTo(`/pages/user/hist/more_info`);
				break;
			default:
				break;
		}
	};
</script>

<style scoped>
	.login {
		display: flex;
	}

	.login-button {
		padding: 0px 15px;
		font-size: 16px;
		color: white;
		background-color: #4CAF50;
		margin-left: 15px;
	}

	.update {
		background-color: blueviolet;
		position: relative;
		height: 100rpx;
		color: #ffffff;
		border-radius: 5%;
	}

	.updates {
		width: 30rpx;
		height: 30rpx;
		margin-top: 5%;
		margin-left: 5%;
		margin-right: 20rpx;
	}

	.sy {
		margin-left: 30rpx;
	}

	.alis {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.container {
		padding: 20px;
		background-color: #f0f0f0;
	}

	.welcome {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.greeting h2 {
		margin: 0;
		color: #333;
	}

	.greeting p {
		margin: 0;
		color: #666;
	}

	.tabs {
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		width: 100%;
		border: 1px solid #ddd;
		border-radius: 8px;
	}

	.tab {
		width: 20%;
		padding: 10px;
		font-size: 11px;
		text-align: center;
	}

	.ali {
		width: 45px;
		height: 45px;
	}

	.tab img {
		position: absolute;
		top: 0;
		/* 将图片顶部与文字顶部对齐 */
		left: 0;
		/* 将图片左侧与文字左侧对齐 */
	}

	.footer-links {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
	}

	.link {
		padding: 30rpx;
		border-bottom: 1px solid #ddd;
		color: #333;
		text-decoration: none;
		cursor: pointer;
	}

	.link:last-child {
		border-bottom: none;
	}
</style>